<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="a"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>详情页</title>
<link rel="stylesheet" href="static/layui/css/layui.css" media="all">
</head>
<body>

	<form class="layui-form" action="" style="margin-top: 20px">
		<div class="layui-form-item layui-inline">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-block">
				<input type="text" name="studentName" placeholder="请输入要查询的姓名"
					autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item layui-inline">
			<label class="layui-form-label">性别</label>
			<div class="layui-input-block">
				<select lay-verify="required" name="gender" id="gender">
					<option value="全部">全部</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item layui-inline">
			<label class="layui-form-label">班级</label>
			<div class="layui-input-block">
				<select lay-verify="required" name="classId">
					<option value="-1">全部</option>
					<a:forEach items="${classList}" var="b">
						<option value="${b.id}">${b.className}</option>
					</a:forEach>
				</select>
			</div>
		</div>

		<div class="layui-form-item layui-inline">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>


	<table id="demo" lay-filter="test"></table>

	<script src="static/layui/layui.js"></script>
	<script>
		layui.use('table', function() {
			var table = layui.table;
			var form = layui.form;
			var $ = layui.$;

			//第一个实例
			table.render({
				id : 'idTest',
				elem : '#demo',
				toolbar : '#toolbarDemo',
				height : 520,
				url : 'getList' //数据接口
				,
				page : true //开启分页
				,
				cols : [ [ //表头
				{
					field : 'studentId',
					title : 'ID',
					fixed : 'left'
				}, {
					field : 'studentName',
					title : '姓名'
				}, {
					field : 'gender',
					title : '性别'
				}, {
					field : 'phone',
					title : '电话'
				}, {
					field : 'qq',
					title : 'qq'
				}, {
					field : 'birthday',
					title : '生日',
					width : 180
				}, {
					field : 'className',
					title : '班级'
				}
				//,{field: 'classId', title: '班级ID'} 
				, {
					title : '操作',
					align : 'center',
					toolbar : '#barDemo'
				} //这里的toolbar值是模板元素的选择器
				] ]
			});

			//监听submit提交
			form.on('submit(formDemo)', function(data) {
				table.reload('idTest', {
					where : data.field,
					page : {
						curr : 1
					//重新从第 1 页开始
					}
				}); //只重载数据
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			//加载班级信息
			/* function loadcls(){
			  $.get("getClazz",null,function(result){
				  for(var i=0; i<result.length;i++){ 
					   $("#cla").append('<option value="'+result[i].id+'">'+result[i].className+'</option>');
				  }
				  $("#gender").append('<option value="男">男</option>');
				  $("#gender").append('<option value="女">女</option>');
				  //动态组织表单，重新渲染
				  form.render(); 
			  },"json");
			}   */

			//加载下拉框数据
			//loadcls()

			//加载性别数据
			function loadgender() {
				$("#gender").append('<option value="男">男</option>');
				$("#gender").append('<option value="女">女</option>');
				//动态组织表单，重新渲染
				form.render();
			}
			//加载性别下拉框数据
			loadgender()

			//头部工具栏监听事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'add':
					layer.open({
						title : "添加",
						shade : [ 0.8, '#393D49' ],
						area : [ '800px', '500px' ],
						type : 2,
						content : 'formPage' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
					});
					break;
				case 'delete':
					layer.msg('删除');
					break;
				case 'update':
					layer.msg('编辑');
					break;
				}
				;
			});

			//监听工具条 
			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看

					//do somehing
				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						$.ajax({
							url : 'delStu',
							type : 'post',
							data : {
								"studentId" : data.studentId
							},
							success : function(res) {
								if (res.code == 0) {
									layer.msg(res.msg, {
										icon : 6
									});
								} else {
									layer.msg(res.msg, {
										icon : 5
									});
								}
							}
						});

					});
				} else if (layEvent === 'edit') { //编辑
					//do something
					layer.open({
						title : "编辑",
						shade : [ 0.8, '#393D49' ],
						area : [ '800px', '500px' ],
						type : 2,
						content : 'formPage?studentId='+data.studentId//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
						/* success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.find('#studentName').val(data.studentName);
							body.find('#phone').val(data.phone);
							body.find('#qq').val(data.qq);
							body.find('#birthday').val(data.birthday);
							body.find('#studentId').val(data.studentId);
						} */
					});
					//同步更新缓存对应的值
					obj.update({
						username : '123',
						title : 'xxx'
					});
				} else if (layEvent === 'LAYTABLE_TIPS') {
					layer.alert('Hi，头部工具栏扩展的右侧图标。');
				}
			});

		});
	</script>
	<!--头部工具栏  -->
	<script type="text/html" id="toolbarDemo">
  	<div class="layui-btn-container">
   		<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="add">添加</button>
 	</div>
	</script>
	<!--绑定工具条 -->
	<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</body>
</html>